<template>
  <div id="home">
    <!--头部-->
    <div class="top clearfix">
      <!--左边轮播图-->
      <div class="bigImgBox">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item
            v-for="(item,index) in bigImgList"
            :key="index">
            <h3>
              <img height="420px" width="100%" :src="item.url" alt="">
            </h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!--右边警示教育查询-->
      <div class="top-right">
        <!--警示教育/考试查询-->
        <!--<div class="jsjyks">警示教育/考试查询</div>-->
        <div class="jsjyks">环保简介</div>
        <div class="jianjie">
        南京市环保宣教中心成立于1999年,主要承担全市环境保护宣传教育工作。中心编制20人。南京市环保宣教工作的主要任务是:围绕可持续发展战略和环境保护中心工作,发动全社会的力量,开展各种形式的环境宣传教育活动,提高公众环境意识;推进环境保护公众参与机制的建立;发挥舆论监督作用,增进人民群众对政府环境保护工作的理解、支持和参与,为环境保护事业的持续发展提供强大的舆论支持和精神动力,努力形成全社会关心环境、自觉保护环境、人与自然和谐相处的良好局面。
        </div>
      </div>
      <!--下方友情链接-->
      <div class="lianjie">
        <div class="lianjie1">友情链接</div>
        <div class="lianjie2" @click="toWaiLian('http://hbj.nanjing.gov.cn/')">
          <span>•</span>
          南京市生态环境局
        </div>
        <div class="lianjie3"  @click="toWaiLian('http://www.mee.gov.cn/')">
          <span>•</span>
          中华人民共和国生态环境部
        </div>
      </div>
    </div>
    <!--信息公告-->
    <announcement></announcement>
    <!--三大块-->
    <threeBigPieces></threeBigPieces>
    <!--课程-->
    <curriculum></curriculum>
  </div>
</template>

<script>
  import announcement from './announcement'
  import threeBigPieces from './threeBigPieces'
  import curriculum from './curriculum'
  export default {
      components: {
        announcement,
        threeBigPieces,
        curriculum
      },
    name: 'home',
    data () {
      return {
        bigImgList:[
          {url:require('@/assets/images/home/banner.png')},
        ],
        daohangIndex: 0,
        weifaForm: {
          scale: '',
          type: '',
          num: '',
        }
      }
    },
    methods: {
      onSubmit(){
        this.$message({
          message: '请输入正确的企业编号',
          type: 'warning',
          offset: '500'
        });
      },
      toWaiLian(value) {
        window.open(value,'_blank')
      }
    }
  }
</script>

<style scoped>
#home {

}
/*头部*/
.top {
  width: 100%;
  box-sizing: border-box;
}
/*左边轮播图*/
  .bigImgBox {
    width: 880px;
    height: 420px;
    margin-right: 20px;
    display: inline-block;
    float: left;
  }
  /deep/
.el-carousel__container {
    height: 420px;
  }
/*右边警示教育查询*/
  .top-right {
    display: inline-block;
    margin-top: 20px;
    width: 300px;
    height: 400px;
    background: #FFFFFF;
    box-shadow: 3px 4px 20px 0px rgba(114, 114, 114, 0.3);
    overflow-x: hidden;
  }
  .jsjyks {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #F7F8FA;
    font-size: 20px;
    font-weight: bold;
    color: #22944E;
    text-align: center;
  }
  .jianjie {
    padding: 16px 20px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 340px;
    width: 324px;
    box-sizing: border-box;
    line-height: 32px;
    color: #666666;
    text-indent:2em;
    font-size: 16px;
  }
  .daohang {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    padding-left: 23px;
    position: relative;
  }
  .daohang span {
    margin-right: 55px;
    font-size: 16px;
    font-weight: bold;
    color: #22944E;
  }
.daohang span:hover {
    cursor:pointer;
  }
  .daohang :last-child {
    position: absolute;
    bottom: 0;
    display: inline-block;
    width: 40px;
    height: 2px;
    background: #22944E;

  }
/*警示教育/考试查询*/
  .weifa {
    width: 100%;
    padding: 12px 20px;
    border-top: 0;
    box-sizing: border-box;
    position: relative;
  }
  .weifa /deep/
  .el-select, .el-input {
    border: 1px solid #E5E5E5;
    border-radius: 4px;
  }
.weifa /deep/
  .el-input__inner {
    background: #F7F8FA;
    font-size: 14px;
    font-weight: 400;
    color: #9A9A9A;
  padding-left: 39px;
  }
  .tubiao1 {
    position: absolute;
    left: 32px;
    top: 24px;
  }
.tubiao2 {
  position: absolute;
  left: 32px;
  top: 85px;
}
.tubiao3 {
  position: absolute;
  left: 32px;
  top: 148px;
}
/*友情链接*/
.lianjie {
  margin: 20px 0;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  font-size: 0;
}
.lianjie div {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin-right: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  box-sizing: border-box;
  vertical-align: middle;
}
.lianjie .lianjie1 {
  width: 160px;
  background-color: #22944E;
  text-align: center;
}
.lianjie .lianjie2{
  width: 500px;
  background-image: url('../../assets/images/home/Link1-bg.png');
  background-size: cover;
  padding-left: 30px;
  cursor: pointer;
}
.lianjie .lianjie2 span {
  font-size: 20px;
  margin-right: 8px;
}
.lianjie .lianjie3{
  width: 500px;
  margin-right: 0;
  background-image: url('../../assets/images/home/Link2-bg.png');
  background-size: cover;
  padding-left: 30px;
  cursor: pointer;
}
.lianjie .lianjie3 span {
  font-size: 20px;
  margin-right: 8px;
}
</style>
